<template>
  <div class="admin-dashboard">
    <h1>管理界面</h1>
    <div class="user-management">
      <h2>管理员管理</h2>
      <ul>
        <li v-for="admin in adminList" :key="admin.id">
          {{ admin.username }}
        </li>
      </ul>
    </div>
    <div class="log-management">
      <h2>日志管理</h2>
      以表格的形式展示
      <table>
        <thead>
          <tr>
            <th>时间</th>
            <th>操作</th>
            <th>用户</th>
          </tr>
        </thead>
        <tbody class="log-list">
          <tr v-for="log in logList" :key="log.id" class="log-item">
            <td>{{ formatDate(log.timestamp) }}</td>
            <td>{{ log.operation }}</td>
            <td>{{ getUsername(log.user_id) }}</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3">日志总数：{{ logList.length }}</td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</template>

<script>
import { fetchLogData } from '@/api/logService';
import { fetchAdminData } from '@/api/adminsService';

export default {
  name: 'AdminOperationPlatform',
  data() {
    return {
      adminList: [],
      logList: [],
      adminMap: {}
    }
  },
  created() {
    this.fetchLogData();
    this.loadAdminData();
  },
  methods: {
    async fetchLogData() {
      try {
        const logs = await fetchLogData();
        this.logList = logs;
        console.log('Log data:', logs);
      } catch (error) {
        console.error('Error fetching log data:', error);
      }
    },
    async loadAdminData() {
      try {
        const data = await fetchAdminData();
        this.adminList = data;
        this.createAdminMap(data);
        console.log('Admin data:', data);
      } catch (error) {
        console.error('Error fetching admin data:', error);
      }
    },
    createAdminMap(admins) {
      this.adminMap = admins.reduce((map, admin) => {
        map[admin.id] = admin.username;
        return map;
      }, {});
    },
    getUsername(userId) {
      return this.adminMap[userId] || 'Unknown User';
    },
    formatDate(timestamp) {
      const date = new Date(timestamp);
      return date.toLocaleString();
    }
  }
}
</script>

<style scoped>
.admin-dashboard {
  max-width: 1500px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
  font-size: 24px;
}

.user-management,
.log-management {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.log-management {
  height: 60vh;
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: #444;
  text-align: left;
}

thead th {
  background-color: #f2f2f2;
  padding: 12px;
  border-bottom: 2px solid #ddd;
}

tbody td {
  padding: 12px;
  border-bottom: 1px solid #eee;
}

tfoot td {
  padding: 12px;
  border-top: 2px solid #ddd;
}

h2 {
  color: #444;
  border-bottom: 2px solid #ddd;
  font-size: 18px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  border-bottom: 1px solid #eee;
  color: #555;
  font-size: 16px;
  display: flex;
  align-items: center;
}

li:last-child {
  border-bottom: none;
}

.log-item:nth-child(odd) {
  background-color: #f5f5f5;
}
</style>
